<template>
    <div class="login">
        <p><img class="logo" src="../../assets/images/login_image/logo.png" alt="logo"></p>
        <div class="loginForm inputPwd" v-if="isForget==='login'">
            <p class="loginTitle">欢迎来到车载管理平台！</p>
            <form name="inputPwd">
                <p><input type="text" id="email" name="email" placeholder="请输入邮箱账号" autocomplete="off"
                          v-model="email"><label for="email"></label></p>
                <p><input class="password" type="password" id="password" name="password" autocomplete="off"
                          placeholder="请输入密码" v-model="password" @keyup.enter="login"><label for="password"></label>
                </p>
                <p>
                    <button type="button" class="loginBtn" @click="login">登录</button>
                </p>
                <p>
                    <span class="forgetPwdBtn">
                        <a href="javascript:void(0)" @click="forgetPwdFun">忘记密码？</a>
                    </span>
                </p>
            </form>
        </div>
        <div class="loginForm forgetPwd" v-else-if="isForget==='forget'">
            <form name="sendEmail">
                <p class="forgetEmail">
                    <input type="text" id="forget-email" name="forget-email" placeholder="请输入邮箱账号"
                           autocomplete="off" v-model="sendEmail">
                    <label for="forget-email"></label>
                </p>
                <p>
                    <button type="button" class="loginBtn" @click="sendEmailFun">发送重置密码邮件</button>
                </p>
            </form>
        </div>
        <div class="loginForm sendEmailSuc" v-else-if="isForget==='sendRemind'">
            <p>已向您的邮箱发送了一封验证码邮件，请输入验证码进行验证。</p>
            <p class="vCode">
                <label>
                    <input type="text" v-model="vCode">
                </label>
            </p>
            <p class="vCode">
                <button type="button" @click="checkCode">验证</button>
            </p>
            <p class="sendAgain">若长时间未收到邮件，请在垃圾邮箱中查找或<span @click="resend">重新发送重置邮件</span></p>
        </div>
        <div class="loginForm resetPwd" v-else-if="isForget==='reset'">
            <p>
                <label>
                    <input type="text" readonly v-model="sendEmail">
                </label>
            </p>
            <p>
                <input class="password" type="password" id="newPassword" name="newPassword" autocomplete="off"
                       placeholder="新密码(6至12位，必须包含字母、数字)" v-model="newPassword">
                <label for="newPassword"></label><br>
            </p>
            <p>
                <button type="button" class="loginBtn" @click="resetPwd">确定</button>
            </p>
        </div>
        <div class="loginForm resetPwd" v-else-if="isForget==='success'">
            <p class="successSign">
                <span></span>
            </p>
            <p>密码重置成功>>
                <a href="javascript:void (0)" @click="goLogin">首页</a>
            </p>
        </div>
        <alert></alert>
    </div>
</template>

<script>
    import md5 from 'js-md5'
    import alert from '@/components/msgModal/msgModal'//引入【提示】
    export default {
        components: {
            alert,
        },
        data () {
            return {
                email: 'admin',
                password: '123456',
                newPassword: '',
                sendEmail: '694150121@qq.com',
                vCode: '',
                isForget: 'login',
            }
        },
        methods: {
            login () {
                if (this.email === '' || this.password === '') {
                    this.$store.commit('showAlert', {error: this.$msgDictionary.loginEmpty})
                    return
                }
                let params = {
                    cid: md5(String(new Date().getTime() + Math.random())),
                    email: this.email,
                    password: this.password
                }
                this.$ajax.autoService
                    .login(params)
                    .then((res) => {
                        let result = res.data
                        if (result.code === 200) {
                            this.$router.push({path: '/myClient'})
                            window.location.reload()
                        } else {
                            this.$store.commit('showAlert', {error: result.msg})
                        }
                    }, () => {
                        this.$store.commit('showAlert', {error: this.$msgDictionary.serviceException})
                    })
            },
            /**
             * 找回密码流程：
             * 点击忘记密码 --> 输入邮箱，发送验证码 --> 输入验证码，校验验证码 --> 输入新密码 --> 登陆
             */
            forgetPwdFun () {
                this.isForget = 'forget'
            },
            sendEmailFun () {
                if (this.sendEmail === '') {
                    this.$store.commit('showAlert', {error: this.$msgDictionary.email.emptyEmail})
                    return
                }
                let regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
                if (!regEmail.test(this.sendEmail)) {
                    this.$store.commit('showAlert', {error: this.$msgDictionary.email.errEmail})
                    return
                }
                let data = {
                    email: this.sendEmail
                }
                this.$ajax
                    .userInfo
                    .retrievePwd(data)
                    .then((res) => {
                        let result = res.data
                        if (result.code === 200) {
                            this.isForget = 'sendRemind'
                        } else {
                            this.$store.commit('showAlert', {error: result.msg})
                        }
                    }, () => {
                        this.$store.commit('showAlert', {error: this.$msgDictionary.serviceException})
                    })
            },
            // 重新发送验证码
            resend () {
                this.isForget = 'forget'
            },
            // 校验验证码
            checkCode () {
                if (this.vCode === '') {
                    this.$store.commit('showAlert', {error: this.$msgDictionary.vCode.emptyVCode})
                    return
                }
                let data = {
                    email: this.sendEmail,
                    authCode: this.vCode
                }
                this.$ajax
                    .userInfo
                    .checkVCode(data)
                    .then((res) => {
                        let result = res.data
                        if (result.code === 200) {
                            this.$store.commit('showAlert', {success: this.$msgDictionary.vCode.sucVCode})
                            let timer = setTimeout(() => {
                                $('#msgModal').modal('hide')
                                clearTimeout(timer)
                                this.isForget = 'reset'
                            }, 2000)
                        } else if (result.code === 401) {
                            this.$store.commit('showAlert', {error: result.msg})
                            let timer = setTimeout(() => {
                                $('#msgModal').modal('hide')
                                clearTimeout(timer)
                                this.isForget = 'forget'
                            }, 2000)
                        } else {
                            this.$store.commit('showAlert', {error: this.$msgDictionary.vCode.errVCode})
                            let timer = setTimeout(() => {
                                $('#msgModal').modal('hide')
                                clearTimeout(timer)
                                this.isForget = 'forget'
                            }, 2000)
                        }
                    }, () => {
                        this.$store.commit('showAlert', {error: this.$msgDictionary.serviceException})
                    })
            },
            resetPwd () {
                let reg = /^(\w){6,12}$/
                if (!reg.test(this.newPassword)) {
                    this.$store.commit('showAlert', {error: this.$msgDictionary.password.pwdFormat})
                    return
                }
                let data = {
                    email: this.sendEmail,
                    password: this.newPassword
                }
                this.$ajax
                    .userInfo
                    .forgetPassword(data)
                    .then((res) => {
                        let result = res.data
                        if (result.code === 200) {
                            let timer = setTimeout(() => {
                                clearTimeout(timer)
                                this.isForget = 'success'
                            }, 200)
                        } else {
                            this.$store.commit('showAlert', {error: result.msg})
                        }
                    }, () => {
                        this.$store.commit('showAlert', {error: this.$msgDictionary.serviceException})
                    })
            },
            goLogin () {
                this.email = this.sendEmail
                this.password = this.newPassword
                this.login()
            },
        },
        mounted () {
            this.isForget = 'login'
        }
    }
</script>

<style scoped>

    a:link {
        text-decoration: none;
        color: #ACE0D1;
    }

    a:visited {
        text-decoration: none;
        color: #ACE0D1;
    }

    a:hover {
        text-decoration: none;
        color: #ACE0D1;
    }

    a:active {
        text-decoration: none;
        color: #ACE0D1;
    }

    .login {
        height: 100%;
        width: 100%;
        background: url("../../assets/images/login_image/bg.png") no-repeat;
        background-size: 100% 100%;
    }

    .logo {
        width: 200px;
        margin: 0.8rem 1rem;
    }

    .loginForm {
        width: 6rem;
        height: 4rem;
        padding: 0.1rem;
        margin: auto;
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
    }

    .loginForm p {
        text-align: center;
    }

    .loginForm .loginTitle {
        color: #fff;
        font-size: 22px;
        font-family: "Microsoft Himalaya";
        margin-bottom: 30px;
    }

    .loginForm input {
        border: 1px solid #ACE0D1;
        outline: none;
        margin-bottom: 0.2rem;
        background: transparent;
        height: 50px;
        width: 300px;
        color: #fff;
        padding-left: 50px;
        background: url("../../assets/images/login_image/email.png") no-repeat 10px 12px;
    }

    .loginForm input.password {
        background: url("../../assets/images/login_image/password.png") no-repeat 10px 8px;
    }

    .loginForm .loginBtn {
        width: 300px;
        height: 0.5rem;
        background: #fff;
        border: 0;
        outline: none;
        color: #2BCB9C;
    }

    .loginForm .forgetPwdBtn {
        display: inline-block;
        width: 3rem;
        height: 0.5rem;
        text-align: right;
    }

    .forgetPwd {
        padding-top: 71px;
    }

    .forgetPwd .forgetEmail {
        margin-bottom: 0.9rem;
    }

    .sendEmailSuc {
        padding-top: 0.5rem;
        width: 4.2rem;
        color: #fff;
    }

    .sendEmailSuc p {
        text-align: left;
        line-height: 0.28rem;
    }

    .sendEmailSuc .vCode {
        text-align: center;
        margin: 30px 0;
        vertical-align: middle;
    }

    .sendEmailSuc .vCode input {
        margin: 0;
        background: none;
    }

    .sendEmailSuc .vCode button {
        width: 3rem;
        height: 0.5rem;
        background: #fff;
        border: 0;
        outline: none;
        color: #2BCB9C;
    }

    .sendEmailSuc .sendAgain {
        color: #ACE0D1;
    }

    .sendEmailSuc .sendAgain span {
        color: #000;
        cursor: pointer;
    }

    .resetPwd {
        padding-top: 71px;
        color: #fff;
    }

    .resetPwd .successSign {
        margin-bottom: 0.3rem;
    }

    .resetPwd .successSign span {
        display: inline-block;
        height: 98px;
        width: 98px;
        background: url("../../assets/images/login_image/reset_password_successful.png") no-repeat;
    }
</style>
